<!--
 * @Author: 刘翔
 * @Date: 2025-08-04 15:39:32
 * @LastEditTime: 2025-09-03 11:21:27
 * @LastEditors: your name
 * @Description: 组合页面18(RW区间分布)
 * @FilePath: \建达文件\ts-demo\ts-demo\src\pptHome\pageList\pageType18.vue
-->
<template>
  <div class="page-type-18">
    <div class="page-type-18-center">
      <div class="page-type-18-center-1">
        <BarChart v-if="getChartProps1()" ref="chart1" v-bind="getChartProps1()" />
      </div>
      <div class="page-type-18-center-2">
        <BarChart v-if="getChartProps2()" ref="chart2" v-bind="getChartProps2()" />
      </div>
      <div class="page-type-18-center-3">
        <BarChart v-if="getChartProps3()" ref="chart3" v-bind="getChartProps3()" />
      </div>
      <div class="page-type-18-center-4">
        <BarChart v-if="getChartProps4()" ref="chart4" v-bind="getChartProps4()" />
      </div>
    </div>
    <div class="page-type-18-bottom">
      <div class="page-type-18-bottom-card">
        <CardBox>
          <template #right>
            <span class="card-box-right-item-1" v-html="desc"></span>
          </template>
        </CardBox>
      </div>
    </div>
  </div>
</template>
<script>
import BarChart from '../components/BarChart.vue';
import CardBox from '../components/cardBox.vue';
export default {
  name: 'pageType18',
  components: {
    BarChart,
    CardBox,
  },
  props: {
    chartList1: {
      type: Object,
      default: () => {},
    },
    chartList2: {
      type: Object,
      default: () => {},
    },
    chartList3: {
      type: Object,
      default: () => {},
    },
    chartList4: {
      type: Object,
      default: () => {},
    },
    desc: {
      type: String,
      default: '',
    },
  },
  data() {
    return {};
  },
  methods: {
    // 计算ppt宽度百分比(9是ppt目前总宽度)
    pptWidthPercentFn(pptWidthPercent) {
      return (pptWidthPercent / 100) * 9;
    },
    getChartProps1() {
      return {
        title: this.chartList1.title,
        categories: this.chartList1.data.map(item => item[this.chartList1.XShow]),
        values: this.chartList1.data.map(item => item[this.chartList1.keyList[0]]),
        color: this.chartList1.color,
        smooth: true,
        chartConfig: {
          height: 750,
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          tooltip: {
            textStyle: {
              fontSize: 18,
            },
            formatter: `{b}: {c}${this.chartList1.unitList[0]}`,
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 18,
            },
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              fontSize: 18,
            },
          },
          series: {
            barWidth: '40%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data >= 0 ? '#4874cb' : '#ee6666';
                },
              },
            },
            label: {
              position: 'right',
              show: true,
              fontSize: 18,
              formatter: `{c}${this.chartList1.unitList[0]}`,
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 0.3,
            y: 1,
            w: 2.2,
            h: 3.8,
          },
          // 标题配置
          title: {
            x: 0.7,
            y: 0.8,
            fontSize: 12,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            showLegend: false,
            legendPos: 'b',
            showTitle: false,
            //显示值
            showValue: true,
            //条形方向
            barDir: 'bar',
            // 分类轴字体大小
            catAxisLabelFontSize: 8,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            //数值轴刻度步长(最大值的1.8倍)
            valAxisMajorUnit: Math.round(Math.max(...this.chartList1.data.map(item => Math.abs(item[this.chartList1.keyList[0]]))) * 1.2),
            // 数据标签位置
            dataLabelPosition: 'outEnd',
            // 分类轴标签位置
            catAxisLabelPos: 'low',
            // 数据标签格式化代码
            dataLabelFormatCode: `[黑色]#,##0.00"${this.chartList1.unitList[0]}"`,
          },
        },
      };
    },
    getChartProps2() {
      return {
        title: this.chartList2.title,
        categories: this.chartList2.data.map(item => item[this.chartList2.XShow]),
        values: this.chartList2.data.map(item => item[this.chartList2.keyList[0]]),
        color: this.chartList2.color,
        smooth: true,
        chartConfig: {
          height: 750,
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          tooltip: {
            textStyle: {
              fontSize: 18,
            },
            formatter: `{b}: {c}${this.chartList2.unitList[0]}`,
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 18,
            },
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              fontSize: 18,
            },
          },
          series: {
            barWidth: '40%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data >= 0 ? '#4874cb' : '#ee6666';
                },
              },
            },
            label: {
              show: true,
              position: 'right',
              fontSize: 18,
              formatter: `{c}${this.chartList2.unitList[0]}`,
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 2.7,
            y: 1,
            w: 2.2,
            h: 3.8,
          },
          // 标题配置
          title: {
            x: 3.1,
            y: 0.8,
            fontSize: 12,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            showLegend: false,
            legendPos: 'b',
            showTitle: false,
            //条形方向
            barDir: 'bar',
            // 分类轴字体大小
            catAxisLabelFontSize: 8,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            //数值轴刻度步长(最大值的1.8倍)
            valAxisMajorUnit: Math.round(Math.max(...this.chartList2.data.map(item => Math.abs(item[this.chartList2.keyList[0]]))) * 1.2),
            //显示值
            showValue: true,
            dataLabelPosition: 'outEnd',
            // 分类轴标签位置
            catAxisLabelPos: 'low',
            dataLabelFormatCode: `[黑色]#,##0.00"${this.chartList2.unitList[0]}"`,
          },
        },
      };
    },
    getChartProps3() {
      return {
        title: this.chartList3.title,
        categories: this.chartList3.data.map(item => item[this.chartList3.XShow]),
        values: this.chartList3.data.map(item => item[this.chartList3.keyList[0]]),
        color: this.chartList3.color,
        smooth: true,
        chartConfig: {
          height: 750,
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          tooltip: {
            textStyle: {
              fontSize: 18,
            },
            formatter: `{b}: {c}${this.chartList3.unitList[0]}`,
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 18,
            },
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              fontSize: 18,
            },
          },
          series: {
            barWidth: '40%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data >= 0 ? '#4874cb' : '#ee6666';
                },
              },
            },
            label: {
              position: 'right',
              show: true,
              fontSize: 18,
              formatter: `{c}${this.chartList3.unitList[0]}`,
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 5.1,
            y: 1,
            w: 2.2,
            h: 3.8,
          },
          // 标题配置
          title: {
            x: 5.7,
            y: 0.8,
            fontSize: 12,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            showLegend: false,
            legendPos: 'b',
            showTitle: false,
            //条形方向
            barDir: 'bar',
            // 分类轴字体大小
            catAxisLabelFontSize: 8,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            //数值轴刻度步长(最大值的1.8倍)
            valAxisMajorUnit: Math.round(Math.max(...this.chartList3.data.map(item => Math.abs(item[this.chartList3.keyList[0]]))) * 1.2),
            //显示值
            showValue: true,
            dataLabelPosition: 'outEnd',
            // 分类轴标签位置
            catAxisLabelPos: 'low',
            dataLabelFormatCode: `[黑色]#,##0.00"${this.chartList3.unitList[0]}"`,
          },
        },
      };
    },
    getChartProps4() {
      return {
        title: this.chartList4.title,
        categories: this.chartList4.data.map(item => item[this.chartList4.XShow]),
        values: this.chartList4.data.map(item => item[this.chartList4.keyList[0]]),
        color: this.chartList4.color,
        smooth: true,
        chartConfig: {
          height: 750,
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          tooltip: {
            textStyle: {
              fontSize: 18,
            },
            formatter: `{b}: {c}${this.chartList4.unitList[0]}`,
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 18,
            },
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              fontSize: 18,
            },
          },
          series: {
            barWidth: '40%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data >= 0 ? '#4874cb' : '#ee6666';
                },
              },
            },
            label: {
              position: 'right',
              show: true,
              fontSize: 18,
              formatter: `{c}${this.chartList4.unitList[0]}`,
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 7.3,
            y: 1,
            w: 2.2,
            h: 3.8,
          },
          // 标题配置
          title: {
            x: 8,
            y: 0.8,
            fontSize: 12,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            showLegend: false,
            legendPos: 'b',
            showTitle: false,
            //条形方向
            barDir: 'bar',
            // 分类轴字体大小
            catAxisLabelFontSize: 8,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            //数值轴刻度步长(最大值的1.8倍)
            valAxisMajorUnit: Math.round(Math.max(...this.chartList4.data.map(item => Math.abs(item[this.chartList4.keyList[0]]))) * 1.2),
            //显示值
            showValue: true,
            dataLabelPosition: 'outEnd',
            // 分类轴标签位置
            catAxisLabelPos: 'low',
            dataLabelFormatCode: `[黑色]#,##0.00"${this.chartList4.unitList[0]}"`,
          },
        },
      };
    },
    // 解析带颜色的文本
    parseColoredText(text) {
      return text
        .split(/(<span[^>]*>.*?<\/span>|<br\/?>)/i)
        .filter(part => part) // 移除空字符串
        .map(part => {
          // 检查是否是换行标签
          if (/<br\/?>/.test(part)) {
            return { text: '', color: '#000000', breakLine: true };
          }
          // 检查是否是带颜色的span标签
          const match = part.match(/<span[^>]*color:(#[0-9a-f]+)[^>]*>(.*?)<\/span>/i);
          return match ? { text: match[2], color: match[1], breakLine: false } : { text: part, color: '#000000', breakLine: false };
        });
    },
    exportToPPT(pptx, slide) {
      this.$refs.chart1.exportToPPT(pptx, slide);
      this.$refs.chart2.exportToPPT(pptx, slide);
      this.$refs.chart3.exportToPPT(pptx, slide);
      this.$refs.chart4.exportToPPT(pptx, slide);
      let textList = [];
      this.parseColoredText(this.desc).forEach(item => {
        textList.push({
          text: item.text,
          options: {
            fontSize: 12,
            color: item.color,
          },
        });
      });
      //卡片
      slide.addText(textList, {
        shape: pptx.shapes.ROUNDED_RECTANGLE,
        x: 0.5,
        y: 4.7,
        w: 9,
        h: 0.8,
        rectRadius: 0.2,
        //边框
        line: { color: '151515', width: 0.5 },
        fill: { color: 'fff2ca' },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.page-type-18 {
  width: 100%;
  height: 100%;
  .page-type-18-center {
    display: flex;
    .page-type-18-center-1 {
      width: 25%;
    }
    .page-type-18-center-2 {
      width: 25%;
    }
    .page-type-18-center-3 {
      width: 25%;
    }
    .page-type-18-center-4 {
      width: 25%;
    }
  }
  .page-type-18-bottom {
    .page-type-18-bottom-card {
      .card-box-right-item-1 {
        font-size: 2rem;
      }
    }
  }
  .card-box-container {
    margin: 10px 0;
    justify-content: left;
  }
}
</style>
